<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理员 - 公告管理</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            background: linear-gradient(-45deg, #e9e2f3, #d4c9e8, #d1c9ec);
            background-size: 400% 400%;
            animation: gradient 8s ease infinite;
            min-height: 100vh;
            padding: 2rem 0;
            margin: 0;
        }
        @keyframes gradient {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        .card {
            background-color: rgba(255, 255, 255, 0.9);
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
            backdrop-filter: blur(5px);
            padding: 1.5rem;
            margin-bottom: 2rem;
        }
        .card-title {
            color: #333;
            font-weight: 700;
            margin-bottom: 1.5rem;
            position: relative;
            padding-bottom: 0.5rem;
        }
        .card-title::after {
            content: '';
            width: 40px;
            height: 3px;
            background-color: #8ab4f8;
            position: absolute;
            bottom: 0;
            left: 0;
        }
        .btn-action {
            margin-right: 0.5rem;
            padding: 0.3rem 0.8rem;
            font-size: 0.9rem;
        }
        .top-tag {
            background-color: #f87171;
            color: white;
            font-size: 0.8rem;
            padding: 0.1rem 0.5rem;
            border-radius: 4px;
            margin-right: 0.5rem;
        }
        .message {
            animation: fadeIn 0.5s ease-in-out;
            text-align: center;
            margin-bottom: 1rem;
        }
        .success-message { color: #198754; }
        .error-message { color: #dc3545; }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
    </style>
</head>
<body>
<div class="container">
    <div class="card">
        <div class="d-flex justify-content-between align-items-center">
            <h3 class="card-title">公告管理</h3>
            <a href="/admin/content/announcement/publish" class="btn btn-primary">发布新公告</a>
        </div>

        <!-- 提示信息 -->
        <div th:if="${successMsg != null}" class="message success-message" th:text="${successMsg}"></div>
        <div th:if="${errorMsg != null}" class="message error-message" th:text="${errorMsg}"></div>

        <!-- 公告列表表格 -->
        <div class="table-responsive">
            <table class="table table-hover">
                <thead class="table-light">
                <tr>
                    <th>ID</th>
                    <th>标题</th>
                    <th>发布人</th>
                    <th>发布时间</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr th:each="ann : ${announcements}">
                    <td th:text="${ann.id}"></td>
                    <td>
                        <span th:if="${ann.isTop}" class="top-tag">置顶</span>
                        <span th:text="${ann.title}"></span>
                    </td>
                    <td th:text="${ann.publisher}"></td>
                    <td th:text="${#dates.format(ann.publishTime, 'yyyy-MM-dd HH:mm:ss')}"></td>
                    <td th:text="${ann.isTop ? '已置顶' : '普通'}"></td>
                    <td>
                        <a th:href="@{/admin/content/announcement/edit/{id}(id=${ann.id})}" class="btn btn-sm btn-warning btn-action">编辑</a>
                        <a th:href="@{/admin/content/announcement/delete/{id}(id=${ann.id})}" class="btn btn-sm btn-danger btn-action" onclick="return confirm('确定要删除该公告吗？')">删除</a>
                    </td>
                </tr>
                <tr th:if="${announcements.isEmpty()}">
                    <td colspan="6" class="text-center text-muted">暂无公告，请发布第一条公告～</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>